<template>
  <div>
    <div class="color-list">
      <div v-for="(color, index) in colors" :key="index" :style="{ 'border': selectedColor === color ? `1px solid #e1e2e3`:''}" class="color-out">
        <div :style="{ backgroundColor: color }" class="color-inner"
        v-if="color!='picker'" @click="selectColor(color)">
          <el-icon v-if="color" :style="{display: selectedColor === color ? '':'none'}"><Select /></el-icon>
          <i v-else class="iconfont">&#xe6b6;</i>
        </div>
        <el-color-picker v-if="color=='picker'" @change="selectColor" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits, computed } from "vue";
import { useStore } from 'vuex'
import { Select } from '@element-plus/icons-vue'

const props = defineProps({
  setType: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['changeColor'])
const store = useStore();
const formAppearanceInfo = ref(store.getters.formDesignInfo.formAppearanceInfo);
const colors = reactive([
  "",
  "#f2f6ff",
  "#b5ece2",
  "#fbe2b0",
  "#f68474",
  "#f97272",
  "#ffa3a5",
  "#d59fe3",
  "#bda9dd",
  "#c4c1e5",
  "#b2c8f2",
  "picker"
])
// 当前已选中颜色
const selectedColor = computed(() => {
  let color = ''
  if(props.setType === 'background'){
    color =  formAppearanceInfo.value.backgroundColor
  }
  if(props.setType === 'theme'){
    color =  formAppearanceInfo.value.themeColor
  }
  return color
})
//改变颜色
const selectColor = (color) => {
  console.log(color,444)
  if(props.setType === 'background'){
    formAppearanceInfo.value.backgroundColor = color
  }
  if(props.setType === 'theme'){
    formAppearanceInfo.value.themeColor = color
  }
  emits('changeColor',props.setType,color)
}
</script>
<style lang="scss" scoped>
.color-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .color-out {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 43px;
    height: 43px;
    margin: 6px;
    border-radius: 8px;
    cursor: pointer;
  }
  .color-out:hover{
    border: 1px solid #e1e2e3;
  }
  .color-inner{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 31px;
    height: 31px;
    border-radius: 4px;
    color: #000;
    border: 1px solid #ccc;
  }
}
::v-deep .el-color-picker{
  .el-color-picker__trigger{
    box-sizing: content-box;
    border: none;
  }
  .el-color-picker__color{
    border-radius: 4px;
    background: linear-gradient(60deg, #b5ece2 , #fbe2b0 , #f68474 , #f97272 , #d59fe3, #b2c8f2);
    .el-color-picker__color-inner{
      display: none;
    }
  }
}

</style>